<template>
	<view>
	
	<view class="headk" >
		<view class="kjn" :style="{'margin-top':zhuangtai+'px',}">
			<view class="namkl" @click.stop="closec">X</view>
			<view class="txty">查看档期</view>
		</view>
		
	</view>
	
	<view class="xbox">
		<view class="xbtn" @click="leftArrow">
			<image class="ximg" :src="icon.leftJianIconWhite" mode=""></image>
		</view>
		<view class="txtc">
			{{year}}
			<view class="xm">年</view>
			{{month}}
			<view class="xm">月</view>
		</view>
		<view class="xbtn" @click="rightArrow">
			<image class="ximg" :src="icon.rightJianIconWhite" mode=""></image>
		</view>
	</view>
		
	
	<view class="time_box">
		<view class="tbox">
			<view class="riq">
				<view class="rbtn" v-for="(item,i) in weekList" :key='i'>{{item.txt}}</view>
			</view>
			<view class="qir">
				<!-- <view class="qbtn" >
					<view class="ri man">28</view>
				</view>
				<view class="qbtn" >
					<view class="ri man">29</view>
				</view>
				<view class="qbtn">
					<view class="ri man">30</view>
				</view> -->
			<!-- 	<view class="qbtn" v-for="(item,i) in paiqiObj.date" :key='i'>
					<view class="ri" :class="{man:(item.type==2||item.type==3||item.type==4)}">{{item.num}}</view> -->
					<!-- <view class="tai" :class="{man:item.type==2,xiu:item.type==3}">{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}</view> -->
					<!-- <view v-if="month==mouths&&item.num<=days">
						<view class="tai" style="color: red;" :class="{man:item.type==2,xiu:item.type==3}">
							{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}
						</view>
					</view>
					<view v-else>
						<view class="tai" :class="{man:item.type==2,xiu:item.type==3}">
							{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}
						</view>
					</view>
				</view> -->
				<view class="qbtn" :class="{xuank:xhb==i}" v-for="(item,i) in paiqiObj.date" :key='i'
					@click="edit(item)">
					<view class="ri" :class="{man:(item.type==2||item.type==3||item.type==4)}">{{item.num}}</view>
				
					<!-- <view class="tai"  :class="{man:item.type==2,xiu:item.type==3}">{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}</view> -->
					<view v-if="month==mouths&&item.num<=days">
						<view class="tai" style="color: #999;" :class="{man:item.type==2,xiu:item.type==3}">
							{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}
						</view>
					</view>
					<view v-else>
						<view class="tai" :class="{man:item.type==2,xiu:item.type==3}">
							{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}
						</view>
					</view>
				</view>
				<!-- <view class="qbtn">
					<view class="ri man">1</view>
				</view> -->
			</view>
		</view>
	</view>
	
	
	<view class="good_style_box">
		<view class="txt_icon_box flex">
			<view class="txt family f500 s28">
				擅长风格
			</view>
			<view class="leaf_icon">
				<image class="w100 h100" :src="icon.leafIcon" mode=""></image>
			</view>
		</view>
		<view class="scroll_box">
			<scroll-view class="scroll-view_H flex" scroll-x="true">
				<view id="demo1" class="scroll-view-item_H" v-for="(item,index) in paiqiObj.wedding" :key="index">
					<view class="image_box">
						<image class="w100 h100" :src="item.image_src" mode=""></image>
					</view>
					<view class="leaf_txt s24 familythree f400 txtali">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	
	
	<view class="yuye" @click.stop="yueenter">预约</view>
	
		<!-- <uni-popup ref="popup" type="bottom" backgroundColor="#FFFFFF">
			<view class="top_box_bot w100 txtali">
				<view class="title_txt s30 familytow fblod">
					修改档期状态
				</view>
			</view>
			<view class="type_box">
				<view :class="[typeIndex == index ? 'list_type_active' : 'list_type_box','s30','familythree','f400']"
					v-for="(item,index) in typeList" :key="index" @click="active(index)">
					{{item.txt}}
				</view>
			</view>
			<view class="bottom_btn s28 familythree f400 txtali" @click="close">
				确定
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			paiqiObj:{
				type: Object,
				default: {}
			},
			year:{
				default: 0
			},
			month:{
				default: 0
			}
		},
		data() {
			return {
				weekList: [{
						txt: '日'
					},
					{
						txt: '一'
					},
					{
						txt: '二'
					},
					{
						txt: '三'
					},
					{
						txt: '四'
					},
					{
						txt: '五'
					},
					{
						txt: '六'
					}
				],
				typeIndex: 0,
				zhuangtai:'',
				days:'',
				mouths:''
			}
		},
		computed: {
			...mapState(['icon'])
		},
		onLoad() {
			
		},
		created() {
			let that = this
			let system = uni.getSystemInfoSync()
			that.zhuangtai = system.statusBarHeight
		},
		mounted() {
			this.getDate()
		},
		methods: {
			// 月份减
			leftArrow(){
				this.$emit('leftArrow');
			},
			//月份加
			rightArrow(){
				this.$emit('rightArrow');
			},
			getDate() {
				let date = new Date()
				this.year = date.getFullYear()
				this.mouths = date.getMonth() + 1
				this.days = date.getDate()
			},
			edit(item) {
				if (item.type == '空') {
					this.$refs.popup.open()
				} else {
					uni.showToast({
						title: '该档期已满!',
						icon: 'none',
						duration: 2000,
					})
				}
				if (item.type == '空') {
					this.typeIndex = 0
				} else if (item.type == '休') {
					this.typeIndex = 1
				} else {
					this.typeIndex = 2
				}
			},
			active(index) {
				this.typeIndex = index
			},
			closec(){
				this.$emit('close')
			},
			yueenter(){
				this.$emit('enter')
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
.headk{
	border-top:1upx solid transparent;
	.kjn{
		width:100%;
		height:88upx;
		position: relative;
	}
	.namkl{
		position: absolute;
		left:32upx;
		top:20upx;
		font-size:36upx;
		color:#fff;
	}
	.txty{
		color:#fff;
		text-align: center;
		font-size:32upx;
		height:88upx;
		line-height: 88upx;
	}
}
.xbox{
	width:686upx;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	margin-top:70upx;
	.xbtn{
		width:62upx;
		height:62upx;
		border-radius: 31upx;
		text-align: center;
		border: 2upx solid #6E6F71;
		.ximg{
			width:30upx;
			height:30upx;
			margin-top:16upx;
		}
	}
	.txtc{
		width:300upx;
		text-align: center;
		color:#fff;
		font-size:44upx;
		font-weight: 550;
		height:62upx;
		line-height: 62upx;
		.xm{
			display: inline-block;
			color:#999999;
			font-size:24upx;
			
		}
	}
}

.time_box{
	width:100%;
	margin:0 auto;
	background: #181819;
	margin-top:40upx;
	padding:30upx 0;
	.tbox{
		width:686upx;
		margin:0 auto;
		.riq{
			width:100%;
			display: flex;
			justify-content: space-between;
			.rbtn{
				width:95upx;
				text-align: center;
				color:#EEEEEE;
				font-size:32upx;
				height:70upx;
				line-height: 70upx;
			}
		}
		.qir{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.qbtn{
				width:95upx;
				text-align: center;
				margin-top:40upx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				height:90upx;
				.ri{
					color:#CCCCCC;
					font-size:32upx;
					&.man{
						color:#6E6F71;
					}
				}
				.tai{
					color:#CCCCCC;
					font-size:24upx;
					&.man{
						color:#FF3F4A;
					}
					&.xiu{
						color:#6E6F71;
					}
				}
			}
		}
	}
}
.good_style_box {
	padding-left: 32upx;
	padding-top: 40upx;
	box-sizing: border-box;

	.txt_icon_box {
		.txt {
			color: #FFFFFF;
		}

		.leaf_icon {
			width: 36upx;
			height: 36upx;
			margin-left: 4upx;
			margin-top: 2upx;
		}
	}

	.scroll_box {
		margin-top: 28upx;

		.scroll-view_H {
			white-space: nowrap;

			.scroll-view-item_H {
				display: inline-block;
				width: 96upx;
				margin-right: 40upx;
				overflow: hidden;

				.image_box {
					width: 82upx;
					height: 82upx;
					background-color: #323238;
					border-radius: 50%;
					margin: 0 auto;
				}

				.leaf_txt {
					color: #CCCCCC;
					margin-top: 20upx;
				}
			}
		}
	}
}
.yuye{
	width: 686upx;
	height: 80upx;
	background: linear-gradient(270deg, #B49C6E 0%, #ECD9AF 100%);
	border-radius: 40upx;
	text-align: center;
	line-height: 80upx;
	color:#111111;
	font-size:30upx;
	margin:0 auto;
	margin-top:60upx;
}
</style>
<style>
	page {
		background-color: #111111;
		
	}
</style>
